<template>
  <div class="app-container" id="meteredWarn">
    <el-row style="width: 100%;height: 100%;margin: 0;" :gutter="10">
      <!--区域数据-->
      <el-col :span="4" style="height: 100%;padding-left: 0;">
        <div style="background-color: #FFFFFF;height: 100%;padding: 10px;">
          <el-input placeholder="输入关键字进行过滤" clearable size="mini" suffix-icon="el-icon-search"
                    style="width: 100%;" v-model="filterText"/>
          <div style="max-height:96%;overflow-y: auto;margin-top: 10px;" class="treeCont">
            <el-tree
              :data="sheetsTreeList"
              :props="defaultProps"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="tree"
              node-key="id"
              :default-expanded-keys="defaultExpandedKeys"
              highlight-current
              v-loading="treeLoading"
              @node-click="handleNodeClick"
            >
              <template #default="{ node, data}">
                <div class="custom-tree-node"
                     style="display: flex;justify-content: center;align-items: center;font-size: 14px;">
                  <span class="iconfont icon-a-jiafangzijianzhu icon-padding" v-if="data.deviceType === 0"></span>
                  <span class="iconfont icon-loudong icon-padding" v-if="data.deviceType === 1"></span>
                  <span class="iconfont icon-a-homezhuyefangzijia icon-padding" v-if="data.deviceType === 2"></span>
                  <span>{{ node.label }}</span>
                  <span v-if="data.deviceCount!=null" class="device-count">({{data.deviceCount}})</span>
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-col>
      <!--户表数据-->
      <el-col :span="20" style="height: 100%;background-color: #FFFFFF;padding: 5px;">
        <el-row class="line-bottom" v-show="showSearch">
          <el-col class="form_col">
            <el-form :model="queryParams" ref="queryForm" :size="formItemSize" v-show="showSearch" :label-width="labelWidth">
              <div id="searchFilter" style="display: flex; flex-wrap: wrap">
                <el-form-item label="设备编号" prop="terminalId">
                  <el-input
                    v-model="queryParams.terminalId"
                    placeholder="请输入设备编号"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
                <el-form-item label="设备名称" prop="terminalName">
                  <el-input
                    v-model="queryParams.terminalName"
                    placeholder="请输入设备名称"
                    clearable
                    @keyup.enter.native="handleQuery"
                  />
                </el-form-item>
<!--                <el-form-item label="通讯地址" prop="communicateAddress" >-->
<!--                  <el-input-->
<!--                    v-model="queryParams.communicateAddress"-->
<!--                    placeholder="请输入通讯地址"-->
<!--                    clearable-->
<!--                    @keyup.enter.native="handleQuery"-->
<!--                  />-->
<!--                </el-form-item>-->
              </div>
            </el-form>
          </el-col>
          <el-col class="form_query">
            <el-button v-show="collapseAble" type="text" @click="shiftCollapseAble" class="text">
              <span>
                {{ fold ? '收起筛选' : '更多筛选' }}
              </span>
            </el-button>
            <el-button type="primary" @click="handleQuery" size="mini">查询</el-button>
            <el-button @click="resetQuery" size="mini">重置</el-button>
          </el-col>
        </el-row>
        <el-row style="padding: 10px 0">
          <el-button type="primary" @click="onParamsRead">终端多参数读取</el-button>
          <el-button type="primary" @click="onParamsSet">终端多参数设置</el-button>
        </el-row>
        <el-table v-loading="loading" :data="terminalsdbList" size="mini" row-key="id" border
                  :height="getAvailableHeight"
                  @selection-change="handleSelectionChange" default-expand-all
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" :default-sort="defaultSort"
                  @sort-change="handleSorterChange">
          <el-table-column type="selection" width="55" align="center" fixed :selectable="selectable"/>
          <el-table-column label="设备编号" align="center" prop="terminalId" v-if="columns[1].visible"
                           :show-overflow-tooltip="true" width="150" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <router-link :to="{name: 'HistoryDb',params: {locationNb: scope.row.locationNb, tid: scope.row.id, terminalId: scope.row.terminalId}}"><span style="color: #00afff">{{scope.row.terminalId}}</span></router-link>
            </template>
          </el-table-column>
          <el-table-column label="设备名称" align="center" prop="terminalName" v-if="columns[0].visible"
                           :show-overflow-tooltip="true" width="150" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="表状态" align="center" prop="terminalMark" v-if="columns[2].visible"
                           :show-overflow-tooltip="true" width="90" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.used_status" :value="scope.row.terminalMark"/>
            </template>
          </el-table-column>
          <el-table-column label="表型号" align="center" prop="typeId" v-if="columns[3].visible"
                           :show-overflow-tooltip="true" width="180" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.module_type" :value="scope.row.typeId"/>
            </template>
          </el-table-column>
          <el-table-column label="表底数" align="center" prop="baseReading" v-if="columns[4].visible"
                           :show-overflow-tooltip="true" sortable="custom" width="90"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="厂家名称" align="center" prop="supplierId" v-if="columns[5].visible"
                           :show-overflow-tooltip="true" width="100" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.terminal_supplier" :value="scope.row.supplierId"/>
            </template>
          </el-table-column>
          <el-table-column label="安装日期" align="center" prop="installDate" v-if="columns[6].visible"
                           :show-overflow-tooltip="true" width="100" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
          </el-table-column>
          <el-table-column label="安装地址" align="center" prop="installAddress" v-if="columns[7].visible"
                           :show-overflow-tooltip="true" width="180" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="IMEI" align="center" prop="imei" v-if="columns[8].visible"
                           :show-overflow-tooltip="true"
                           width="150" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="SIM卡号" align="center" prop="simNum" v-if="columns[9].visible"
                           :show-overflow-tooltip="true" sortable="custom" width="100"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="钢印/塑封号" align="center" prop="plasticSealNo" v-if="columns[10].visible"
                           :show-overflow-tooltip="true" width="120" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="出厂编号" align="center" prop="firstSupplierId" v-if="columns[11].visible"
                           :show-overflow-tooltip="true" width="130" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="是否带阀控" align="center" prop="valveControl" v-if="columns[12].visible"
                           :show-overflow-tooltip="true" width="110" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.yes_no" :value="scope.row.valveControl"/>
            </template>
          </el-table-column>
          <el-table-column label="阀门地址" align="center" prop="valveAddress" v-if="columns[13].visible"
                           :show-overflow-tooltip="true" sortable="custom" width="100"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="出厂日期" align="center" prop="manufactureDate" v-if="columns[14].visible"
                           :show-overflow-tooltip="true" sortable="custom" width="100"
                           :sort-orders="['ascending', 'descending']">
          </el-table-column>
          <el-table-column label="口径大小" align="center" prop="caliber" v-if="columns[15].visible"
                           :show-overflow-tooltip="true" width="100" sortable="custom"
                           :sort-orders="['ascending', 'descending']">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.ldbd_pipe_caliber" :value="scope.row.caliber"/>
            </template>
          </el-table-column>
          <el-table-column label="采集频率(分钟)" align="center" prop="readingFrequency" v-if="columns[16].visible"
                           :show-overflow-tooltip="true" width="140" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="上传频率(分钟)" align="center" prop="upFrequency" v-if="columns[17].visible"
                           :show-overflow-tooltip="true" width="140" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="位置识别编号" align="center" prop="locationNb" v-if="columns[18].visible"
                           :show-overflow-tooltip="true" width="140" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="协议" align="center" prop="protocolName" v-if="columns[19].visible"
                           :show-overflow-tooltip="true" width="180" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="通讯地址" align="center" prop="communicateAddress" v-if="columns[20].visible"
                           :show-overflow-tooltip="true" width="180" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="经度" align="center" prop="lng" v-if="columns[21].visible"
                           :show-overflow-tooltip="true"
                           width="140" sortable="custom" :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="纬度" align="center" prop="lat" v-if="columns[22].visible"
                           :show-overflow-tooltip="true"
                           width="140" sortable="custom" :sort-orders="['ascending', 'descending']"/>
          <el-table-column label="备注" align="center" prop="remark" v-if="columns[23].visible"
                           :show-overflow-tooltip="true" sortable="custom"
                           :sort-orders="['ascending', 'descending']"/>
        </el-table>

        <pagination
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />

      </el-col>
    </el-row>

    <!-- 多参数读取警对话框 -->
    <el-dialog :title="titleRead" :visible.sync="openRead" width="45%" append-to-body>
      <el-checkbox-group v-model="presetReadCommands" @change="onCheckReadChange">
        <el-row>
          <el-col v-for="item in readCommandParam" :span="8" :key="item.key" style="margin-bottom: 15px">
            <el-checkbox :label="item.value" :key="item.value">{{item.value}}</el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <p v-html="readResule" v-if="readView"></p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleParamsRead">确 定</el-button>
        <el-button @click="paramsReadCancel">取 消</el-button>
      </div>
    </el-dialog>



<!--    多参数设置对话框-->
    <el-dialog :title="titleSet" :visible.sync="openSet" width="45%" append-to-body v-loading="confirmLoading">
      <el-radio-group v-model="writeCommandType" style="margin: 20px 0;">
        <el-radio-button label="1">发送预置命令</el-radio-button>
        <el-radio-button label="2">发送实时命令</el-radio-button>
      </el-radio-group>

      <el-tabs v-model="activeName">
        <el-tab-pane label="终端地址设置" name="1">
          <el-checkbox-group v-model="checkGroup1" style="width: 80%;margin-left: 40px">
            <el-row style="margin-left: 60px">
              <el-col :span="8">
                <el-checkbox label="TAG_1">
                  终端地址
                </el-checkbox>
              </el-col>
              <el-col :span="8">
                <el-checkbox label="TAG_2">
                  定制化终端地址
                </el-checkbox>
              </el-col>
              <el-col :span="8">
                <el-checkbox label="TAG_3">
                  特殊终端地址
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-form :model="form" :inline="true" label-width="140px" ref="form1" style="margin-top: 30px">
            <el-row v-if="presetWriteCommands.includes('TAG_1')">
              <el-col>
                <el-form-item label="终端地址" :rules="{required: true,message: '请输入终端地址'}" prop="terminalAddress">
                  <el-input v-model="form.terminalAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="presetWriteCommands.includes('TAG_2')">
              <el-col>
                <el-form-item label="定制化终端地址" :rules="{required: true,message: '请输入定制化终端地址'}" prop="customTerminalAddress">
                  <el-input v-model="form.customTerminalAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="presetWriteCommands.includes('TAG_3')">
              <el-col>
                <el-form-item label="特殊终端地址" :rules="{required: true,message: '请输入特殊终端地址'}" prop="specialTerminalAddress">
                  <el-input v-model="form.specialTerminalAddress"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="RTU相关设置" name="2">
          <el-checkbox-group v-model="checkGroup2" style="width: 80%">
            <el-row style="margin-left: 140px">
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_6">
                  IP设置
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_5">
                  上报平台
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_10">
                  错峰发送
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_12">
                  自动对时
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_4">
                  在线模式
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_9">
                  立即重启
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-form :model="form" :inline="true" label-width="150px" ref="form2">
            <el-card style="margin: 20px 0" v-if="presetWriteCommands.includes('TAG_6')" shadow="never">
              <div slot="header" class="clearfix">
                <span>IP设置</span>
              </div>
              <el-row class="form-row">
                <el-col>
                  <el-form-item label="IP地址" :rules="{required: true,message: '请输入IP地址'}" prop="IP">
                    <el-input v-model="form.IP"></el-input>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="端口号" :rules="{required: true,message: '请输入端口号'}" prop="port">
                    <el-input v-model="form.port"></el-input>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="IP类型" :rules="{required: true,message: '请选择IP类型'}" prop="IpType">
                    <el-radio-group v-model="form.IpType">
                      <el-radio label="0">
                        TCP
                      </el-radio>
                      <el-radio label="1">
                        UDP
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col>
                  <el-form-item label="中心号" :rules="{required: true,message: '请输入中心号'}" prop="center">
                    <el-radio-group v-model="form.center">
                      <el-radio label="0">
                        主中心
                      </el-radio>
                      <el-radio label="1">
                        副中心
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-row style="margin-left: 20px">
              <el-col :lg="12" :md="8" :sm="24" v-if="presetWriteCommands.includes('TAG_5')">
                <el-form-item label="上报平台" :rules="{required: true,message: '请选择上报平台'}" prop="protocolPlatform">
                  <el-select v-model="form.protocolPlatform" placeholder="请选择RTU的上报协议平台" style="width: 160px">
                    <el-option :value="item.value" v-for="item in protocolPlatformOpt" :key="item.value">
                      {{item.label}}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="8" :sm="24" v-if="presetWriteCommands.includes('TAG_10')">
                <el-form-item label="错峰发送" :rules="{required: true,message: '请选择'}" prop="staggeredPeaks">
                  <el-radio-group v-model="form.staggeredPeaks">
                    <el-radio label="0">
                      关闭
                    </el-radio>
                    <el-radio label="1">
                      开启
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="8" :sm="24" v-if="presetWriteCommands.includes('TAG_12')">
                <el-form-item label="自动对时" :rules="{required: true,message: '请选择'}" prop="automaticTime">
                  <el-radio-group v-model="form.automaticTime">
                    <el-radio label="0">
                      关闭
                    </el-radio>
                    <el-radio label="1">
                      开启
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="8" :sm="24" v-if="presetWriteCommands.includes('TAG_4')">
                <el-form-item label="在线模式" :rules="{required: true,message: '请选择'}" prop="RTUOnlineMode">
                  <el-radio-group v-model="form.RTUOnlineMode">
                    <el-radio label="0">
                      定时上报
                    </el-radio>
                    <el-radio label="1">
                      实时在线
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="8" :sm="24" v-if="presetWriteCommands.includes('TAG_9')">
                <el-form-item label="立即重启" :rules="{required: true,message: '请勾选'}" prop="reboot">
                  <el-checkbox v-model="form.reboot">
                  </el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="远程升级相关设置" name="3">
          <el-checkbox-group v-model="checkGroup3" style="width: 80%;margin-left: 65px">
            <el-row style="margin-left: 140px">
              <el-col :span="12" style="margin-bottom: 15px">
                <el-checkbox label="TAG_16">
                  远程升级参数下发
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_17">
                  取消升级
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-form :model="form" :inline="true" label-width="140px" ref="form3">
            <el-card shadow="never" v-if="presetWriteCommands.includes('TAG_16')" :bordered="false">
              <div slot="header" class="clearfix">
                <span>远程升级参数下发</span>
              </div>
              <el-row class="form-row">
                <el-col :lg="12" :md="16" :sm="24">
                  <el-form-item label="文件名" :rules="{required: true,message: '请输入文件名'}" prop="fileName">
                    <el-input v-model="form.fileName"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="12" :md="8" :sm="24">
                  <el-form-item label="校验码" :rules="{required: true,message: '请输入校验码'}" prop="checkSum">
                    <el-input v-model="form.checkSum"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="12" :md="8" :sm="24">
                  <el-form-item label="加密前长度" :rules="{required: true,message: '请输入加密前长度'}" prop="lengthBefore">
                    <el-input v-model="form.lengthBefore"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :lg="12" :md="8" :sm="24">
                  <el-form-item label="加密后长度" :rules="{required: true,message: '请输入加密后长度'}" prop="lengthAfter">
                    <el-input v-model="form.lengthAfter"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-card>
            <el-row style="margin-left: 20px" v-if="presetWriteCommands.includes('TAG_17')">
              <el-col :lg="8" :md="8" :sm="24">
                <el-form-item label="取消升级" :rules="{required: true,message: '请勾选'}" prop="concalUpdate">
                  <el-checkbox v-model="form.concalUpdate">
                  </el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="数据补抄" name="4">
          <el-form :model="form" :inline="true" :label-col="{ span: 6}" :wrapper-col="{ span: 12 }" ref="form4">
            <el-row class="form-row">
              <el-col :lg="12" :md="16" :sm="24">
                <el-form-item label="开始时间">
                  <el-date-picker
                    v-model="form.beginTime"
                    type="datetime"
                    placeholder="请选择开始时间"
                    style="width: 100%;"
                    format="yyyy-MM-dd HH"
                    value-forma="YYMMDDHH"
                  />
                </el-form-item>
              </el-col>
              <el-col :lg="12" :md="8" :sm="24">
                <el-form-item label="结束时间">
                  <el-date-picker
                    v-model="form.endTime"
                    type="datetime"
                    placeholder="请选择结束时间"
                    style="width: 100%;"
                    format="yyyy-MM-dd HH"
                    value-forma="YYMMDDHH"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="其他参数设置" name="5">
          <el-checkbox-group v-model="checkGroup5" style="width: 80%">
            <el-row style="margin-left: 140px">
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_8">
                  采集间隔
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_7">
                  上报间隔
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_11">
                  加密参数
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_18">
                  阀控指令
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_13">
                  副中心
                </el-checkbox>
              </el-col>
              <el-col :span="8" style="margin-bottom: 15px">
                <el-checkbox label="TAG_14">
                  历史数据上报
                </el-checkbox>
              </el-col>
            </el-row>
          </el-checkbox-group>
          <el-form :model="form" label-width="140px" :inline="true" ref="form5">
            <el-row class="form-row">
              <el-col v-if="presetWriteCommands.includes('TAG_8')">
                <el-form-item label="采集间隔" :rules="{required: true,message: '请输入采集间隔'}" prop="gather">
                  <el-input v-model="form.gather"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="presetWriteCommands.includes('TAG_7')">
                <el-form-item label="上报间隔" :rules="{required: true,message: '请输入上报间隔'}" prop="report">
                  <el-input v-model="form.report"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="presetWriteCommands.includes('TAG_11')">
                <el-form-item label="加密参数" :rules="{required: true,message: '请输入加密参数'}" prop="encryptionParam">
                  <el-input v-model="form.encryptionParam"></el-input>
                </el-form-item>
              </el-col>
              <el-col v-if="presetWriteCommands.includes('TAG_18')">
                <el-form-item label="阀控指令" :rules="{required: true,message: '请选择'}" prop="valve">
                  <el-radio-group v-model="form.valve">
                    <el-radio label="2">
                      关闭
                    </el-radio>
                    <el-radio label="1">
                      开启
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="presetWriteCommands.includes('TAG_13')">
                <el-form-item label="副中心" :rules="{required: true,message: '请选择'}" prop="subCenter">
                  <el-radio-group v-model="form.subCenter">
                    <el-radio label="0">
                      关闭
                    </el-radio>
                    <el-radio label="1">
                      开启
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col v-if="presetWriteCommands.includes('TAG_14')">
                <el-form-item label="历史数据上报" :rules="{required: true,message: '请选择'}" prop="subCenterHistory">
                  <el-radio-group v-model="form.subCenterHistory">
                    <el-radio label="0">
                      关闭
                    </el-radio>
                    <el-radio label="1">
                      开启
                    </el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleParamsSet">确 定</el-button>
        <el-button @click="paramsSetCancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import {
  listTerminalsDb,
} from "@/api/record/terminalsdb";
import { getDicts } from '@/api/system/dict/data.js'
import moment from 'moment'
import {listxbWarn, getWarn, delWarn, addWarn, updateWarn} from "@/api/alarm/alarmall";
import {getAreasList} from '@/api/basedata/areas'
import {listMeterSheetsTree} from "@/api/basedata/meterSheets";
import {mapState} from "vuex";
const readCommandList = [
  {
    key: 'TAG_1',
    value: '终端地址'
  },
  {
    key: 'TAG_2',
    value: '定制化终端地址'
  },
  {
    key: 'TAG_3',
    value: '特殊终端地址'
  },
  {
    key: 'TAG_4',
    value: 'RTU在线模式'
  },
  {
    key: 'TAG_5',
    value: '主中心RTU的上报协议平台'
  },
  {
    key: 'TAG_6',
    value: 'RTU的IP设置'
  },
  {
    key: 'TAG_7',
    value: '上报间隔'
  },
  {
    key: 'TAG_8',
    value: '采集间隔'
  },
  {
    key: 'TAG_10',
    value: 'RTU启用错峰发送'
  },
  {
    key: 'TAG_11',
    value: '加密参数'
  },
  {
    key: 'TAG_12',
    value: 'RTU通过模块自动对时'
  },
  {
    key: 'TAG_13',
    value: '副中心启用'
  },
  {
    key: 'TAG_14',
    value: '副中心历史数据上报启用'
  },
  {
    key: 'TAG_18',
    value: '阀门状态'
  }
]
const writeCommandList = [
  {
    key: 'TAG_1',
    value: '终端地址'
  },
  {
    key: 'TAG_2',
    value: '定制化终端地址'
  },
  {
    key: 'TAG_3',
    value: '特殊终端地址'
  },
  {
    key: 'TAG_4',
    value: 'RTU在线模式'
  },
  {
    key: 'TAG_5',
    value: '主中心RTU的上报协议平台'
  },
  {
    key: 'TAG_6',
    value: 'RTU的IP设置'
  },
  {
    key: 'TAG_7',
    value: '上报间隔'
  },
  {
    key: 'TAG_8',
    value: '采集间隔'
  },
  {
    key: 'TAG_9',
    value: 'RTU立即重启'
  },
  {
    key: 'TAG_10',
    value: 'RTU启用错峰发送'
  },
  {
    key: 'TAG_11',
    value: '加密参数'
  },
  {
    key: 'TAG_12',
    value: 'RTU通过模块自动对时'
  },
  {
    key: 'TAG_13',
    value: '副中心启用'
  },
  {
    key: 'TAG_14',
    value: '副中心历史数据上报启用'
  },
  {
    key: 'TAG_15',
    value: '数据补抄'
  },
  {
    key: 'TAG_16',
    value: '远程升级参数下发'
  },
  {
    key: 'TAG_17',
    value: '取消远程升级'
  }
]
const protocolPlatformOpt = [
  {
    value: '0',
    label: 'DGNETTY3.5'
  },
  {
    value: '1',
    label: 'CQZlSV1.0'
  },
  {
    value: '2',
    label: 'DGHWIOTV1.0'
  },
  {
    value: '3',
    label: 'LYGFYSWV1.0'
  },
  {
    value: '4',
    label: 'GUIANSWV1.0'
  },
  {
    value: '5',
    label: 'SHFXV1.0'
  },
  {
    value: '6',
    label: 'HEDAV1.0'
  },
  {
    value: '7',
    label: 'HEBHDV1.0'
  },
  {
    value: '8',
    label: 'SHCTSWV1.0'
  },
  {
    value: '9',
    label: 'GDYJSWV1.0'
  },
  {
    value: '10',
    label: 'FZZLSNBV1.0'
  },
  {
    value: '11',
    label: 'HNLHSWV1.0'
  },
  {
    value: '12',
    label: 'SYPFTV1.0'
  },
  {
    value: '13',
    label: 'JYFJSTDNBV1.0'
  },
  {
    value: '14',
    label: 'HEBEISZHYV1.0'
  },
  {
    value: '15',
    label: 'GXSZY206V1.0'
  },
  {
    value: '16',
    label: 'YCSWRTU2.1'
  },
  {
    value: '17',
    label: 'WXSYSKV1.0'
  },
  {
    value: '18',
    label: 'HEBMEIXIAV1.0'
  },
  {
    value: '19',
    label: 'HNSZY206'
  },
  {
    value: '20',
    label: 'JNSANGAOV1'
  },
  {
    value: '21',
    label: 'GDFSSHSCV1'
  },
  {
    value: '22',
    label: 'BTSWHDNBV1'
  },
  {
    value: '23',
    label: 'ZSGYSANGAOV1'
  },
  {
    value: '24',
    label: 'SDHZSWV1'
  },
  {
    value: '25',
    label: 'HNXTJXSWV1'
  },
  {
    value: '26',
    label: 'GDSLT427V21'
  },
  {
    value: '27',
    label: 'FZZLSMQTTV1'
  },
  {
    value: '28',
    label: 'GDXDFSWV1'
  },
  {
    value: '29',
    label: 'JXNCSYSW'
  },
  {
    value: '30',
    label: 'GDSLMQTTSV1'
  },
  {
    value: '31',
    label: 'HSKJSWV1'
  },
  {
    value: '32',
    label: 'SJZSRV1'
  }, {
    value: '33',
    label: 'GSNBV1.5'
  },{
    value: '34',
    label: 'XJCJGDEVV1'
  },{
    value: '35',
    label: 'XLATMQTT'
  },{
    value: '36',
    label: ':HNHWWT'
  }]
export default {
  name: "CommandDb",
  dicts: ['user_status','warnparamtype', 'terminal_supplier', 'used_status', 'warntargettype', 'belongDepartment', 'module_type', 'ldbd_pipe_caliber', 'yes_no', 'default_position','sign_platform'],
  data() {
    return {
      readView: false,
      readResule: '',
      confirmLoading: false,
      writeCommandParam: writeCommandList,
      protocolPlatformOpt: protocolPlatformOpt,
      form: {
        terminalAddress: '',
        customTerminalAddress: '',
        specialTerminalAddress: '',
        RTUOnlineMode: '',
        protocolPlatform: '',
        center: '',
        IP: '',
        port: '',
        IpType: '',
        report: '',
        gather: '',
        reboot: undefined,
        staggeredPeaks: '',
        encryptionParam: '',
        automaticTime: '',
        subCenter: '',
        subCenterHistory: '',
        beginTime: '',
        endTime: '',
        fileName: '',
        lengthBefore: '',
        lengthAfter: '',
        checkSum: '',
        concalUpdate: undefined,
        valve: '',
      },
      checkGroup1: [],
      checkGroup2: [],
      checkGroup3: [],
      checkGroup4: [],
      checkGroup5: [],
      activeName: '1',
      writeCommandType: '1',
      presetReadCommands: [],
      readCommandParam: readCommandList,
      ids: [],
      // 读取弹框名称
      titleRead: '',
      // 设置弹框名称
      titleSet: '',
      // 关键字区域树
      filterText: null,
      // 屏幕高度
      screenHeight: null,
      // 区域树加载状态
      treeLoading: false,
      defaultExpandedKeys: [],
      title: '',
      terminalsdbList: [],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 区域树配置
      defaultProps: {
        children: "children",
        label: "sheetsName",
      },
      // 是否显示弹出层
      openRead: false,
      openSet: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        terminalName: null,
        terminalId: null,
        systemFlag: null,
        loginUserId: null,
        sheetsCode: null,
      },
      // 列信息
      columns: [
        {key: 1, label: `设备名称`, visible: true},
        {key: 2, label: `设备编号`, visible: true},
        {key: 3, label: `表状态`, visible: true},
        {key: 4, label: `表型号`, visible: false},
        {key: 5, label: `表底数`, visible: false},
        {key: 6, label: `厂家名称`, visible: true},
        {key: 7, label: `安装日期`, visible: true},
        {key: 8, label: `安装地址`, visible: false},
        {key: 9, label: `IMEI`, visible: true},
        {key: 10, label: `SIM卡号`, visible: false},
        {key: 11, label: `钢印号`, visible: false},
        {key: 12, label: `出厂编号`, visible: false},
        {key: 13, label: `是否带阀控`, visible: false},
        {key: 14, label: `阀门地址`, visible: false},
        {key: 15, label: `出厂日期`, visible: false},
        {key: 16, label: `口径`, visible: true},
        {key: 17, label: `采集频率(分钟)`, visible: true},
        {key: 18, label: `上传频率(分钟)`, visible: true},
        {key: 19, label: `位置识别编号`, visible: false},
        {key: 20, label: `协议`, visible: false},
        {key: 21, label: `通讯地址`, visible: false},
        {key: 22, label: `经度`, visible: true},
        {key: 23, label: `纬度`, visible: true},
        {key: 24, label: `备注`, visible: true},
      ],
      // 默认排序
      defaultSort: {prop: 'createTime', order: 'descending'},
      loading: false,
      maxShow: 4,
      formItemSize: 'mini',
      collapseAble: false,
      fold: false,
      labelWidth: '90px',
      // 区域树选项
      sheetsTreeList: [],
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {
    this.getTreeList();
    this.screenHeight = document.body.clientHeight
    // this.getAlarmType()
  },
  computed: {
    presetWriteCommands: function (){
      return [...this.checkGroup1,...this.checkGroup2,...this.checkGroup3,...this.checkGroup4,...this.checkGroup5,]
    },
    getAvailableHeight() {
      return this.screenHeight - 265
    },
    systemFlag() {
      return this.$store.state.user.systemFlag
    },
    loginUserId() {
      return this.$store.state.user.userId
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    // 多参数读取复选框改变
    onCheckReadChange() {
      console.log(this.presetReadCommands,"check")

    },
    // 表格多选框禁用
    selectable(row, rowIndex) {
      if (row.terminalMark === 1) {
        return true;  //不禁用
      } else {
        return false;  //禁用
      }
    },
    // 多参数读取
    onParamsRead() {
      this.presetReadCommands = []
      if(this.ids.length === 0){
        return this.$message.warning('至少选择一个设备')
      }else{
        this.$modal.confirm('是否对"' + this.ids + '"的表进行读取操作？').then(() => {
          this.titleRead="多参数读取"
          this.openRead = true
        }).catch(() => {
        });
      }
    },
    // 多参数设置
    onParamsSet() {
      this.activeName = '1'
      this.writeCommandType = '1'
      if(this.ids.length === 0){
        return this.$message.warning('至少选择一个设备')
      }else{
        this.$modal.confirm('是否对"' + this.ids + '"的表进行设置操作？').then(() => {
          this.titleSet="多参数设置"
          this.openSet = true
        }).catch(() => {
        });
      }
    },
    // 多参数命令读取确认操作
    handleParamsRead() {
      if (this.presetReadCommands.length > 0){
        const reqPresetCommandDatas = []
        this.presetReadCommands.forEach(item => {
          const TagData = {
            TAG: item
          }
          reqPresetCommandDatas.push(TagData)
        })
        this.readResule = `${moment().format('YYYY-MM-DD HH:mm:ss')},发送读取参数命令，请等待...<br/>`
        this.readView = true;
        // SendPresetReadCommand(this.multiParameter.terminalId,reqPresetCommandDatas).then(res=>{
        //   if (res.data.ResultCode === 200){
        //     console.log(res)
        //     this.confirmLoading = false
        //     res.data.data.forEach(item => {
        //       switch (item.TAG){
        //         case 'TAG_1':
        //           this.readResule = `${this.readResule}终端地址：${item.Content}。<br/>`
        //           break
        //         case 'TAG_2':
        //           this.readResule = `${this.readResule}定制化终端地址：${item.Content}。<br/>`
        //           break
        //         case 'TAG_3':
        //           this.readResule = `${this.readResule}特殊终端地址：${item.Content}。<br/>`
        //           break
        //         case 'TAG_4':
        //           this.readResule = `${this.readResule}RTU在线模式：${item.Content === 1 ? '实时在线' : '定时上报'}。<br/>`
        //           break
        //         case 'TAG_5':
        //           this.readResule = `${this.readResule}主中心RTU的上报协议平台：${this.protocolPlatformOpt[item.Content].label}。<br/>`
        //           break
        //         case 'TAG_6':
        //           this.readResule = `${this.readResule}IP：${item.Content}。<br/>`
        //           break
        //         case 'TAG_7':
        //           this.readResule = `${this.readResule}上报间隔：${item.Content}。<br/>`
        //           break
        //         case 'TAG_8':
        //           this.readResule = `${this.readResule}采集间隔：${item.Content}。<br/>`
        //           break
        //         case 'TAG_10':
        //           this.readResule = `${this.readResule}RTU错峰发送：${item.Content === 1 ? '开启' : '关闭'}。<br/>`
        //           break
        //         case 'TAG_11':
        //           this.readResule = `${this.readResule}加密参数：${item.Content}。<br/>`
        //           break
        //         case 'TAG_12':
        //           this.readResule = `${this.readResule}RTU通过模块自动对时：${item.Content === 1 ? '开启' : '关闭'}。<br/>`
        //           break
        //         case 'TAG_13':
        //           this.readResule = `${this.readResule}副中心启用：${item.Content === 1 ? '开启' : '关闭'}。<br/>`
        //           break
        //         case 'TAG_14':
        //           this.readResule = `${this.readResule}副中心历史数据上报启用：${item.Content === 1 ? '开启' : '关闭'}。<br/>`
        //           break
        //         case 'TAG_18':
        //           this.readResule = `${this.readResule}阀门状态：${item.Content === 1 ? '开启' : '关闭'}。<br/>`
        //           break
        //       }
        //     })
        //   }else {
        //     this.readResule = `${this.readResule}未读取到数据!`
        //   }
        // })
      }else {
        this.$message.warning('请选择要读取的参数')
      }

    },
    // 多参数命令设置确认操作
    handleParamsSet() {
      this.confirmLoading = true
      if (this.writeCommandType === ''){
        this.$message.warn('请选择要发送的命令类型')
        this.confirmLoading = false
        return
      }
      if (this.presetWriteCommands.length > 0 || (this.form.beginTime !== '' && this.form.endTime !== '')){
        this.confirmLoading = false
        console.log('终端多参数设置',this.form)
        let flag = true
        this.$refs.form1.validate(valid => {
          if (valid) {
            console.log()
          } else {
            flag = false
          }
        })
        this.$refs.form2.validate(valid => {
          if (valid) {
            console.log()
          } else {
            flag = false
          }
        })
        this.$refs.form3.validate(valid => {
          if (valid) {
            console.log()
          } else {
            flag = false
          }
        })
        this.$refs.form5.validate(valid => {
          if (valid) {
            console.log()
          } else {
            flag = false
          }
        })
        if (flag) {
          const reqPresetCommandDatas = []
          this.presetWriteCommands.forEach(command => {
            const item = {}
            console.log(command)
            switch (command) {
              case 'TAG_1':
                if (this.form.terminalAddress !== '') {
                  item.TAG = 'TAG_1'
                  item.Content = this.form.terminalAddress
                }
                break
              case 'TAG_2':
                if (this.form.customTerminalAddress !== '') {
                  item.TAG = 'TAG_2'
                  item.Content = this.form.customTerminalAddress
                }
                break
              case 'TAG_3':
                if (this.form.specialTerminalAddress !== '') {
                  item.TAG = 'TAG_3'
                  item.Content = this.form.specialTerminalAddress
                }
                break
              case 'TAG_4':
                if (this.form.RTUOnlineMode !== '') {
                  item.TAG = 'TAG_4'
                  item.Content = this.form.RTUOnlineMode
                }
                break
              case 'TAG_5':
                if (this.form.protocolPlatform !== '') {
                  item.TAG = 'TAG_5'
                  item.Content = this.form.protocolPlatform
                }
                break
              case 'TAG_6':
                if (this.form.IP !== '' && this.form.port !== '' && this.form.center !== '' && this.form.IpType !== '') {
                  item.TAG = 'TAG_6'
                  item.Content = `center:${this.form.center},IP:${this.form.IP},IpType:${this.form.IpType},port:${this.form.port}`
                }
                break
              case 'TAG_7':
                if (this.form.report !== '') {
                  item.TAG = 'TAG_7'
                  item.Content = this.form.report
                }
                break
              case 'TAG_8':
                if (this.form.gather !== '') {
                  item.TAG = 'TAG_8'
                  item.Content = this.form.gather
                }
                break
              case 'TAG_9':
                if (this.form.reboot === true) {
                  item.TAG = 'TAG_9'
                  item.Content = 1
                }
                break
              case 'TAG_10':
                if (this.form.staggeredPeaks !== '') {
                  item.TAG = 'TAG_10'
                  item.Content = this.form.staggeredPeaks
                }
                break
              case 'TAG_11':
                if (this.form.encryptionParam !== '') {
                  item.TAG = 'TAG_11'
                  item.Content = this.form.encryptionParam
                }
                break
              case 'TAG_12':
                if (this.form.automaticTime !== '') {
                  item.TAG = 'TAG_12'
                  item.Content = this.form.automaticTime
                }
                break
              case 'TAG_13':
                if (this.form.subCenter !== '') {
                  item.TAG = 'TAG_13'
                  item.Content = this.form.subCenter
                }
                break
              case 'TAG_14':
                if (this.form.subCenterHistory !== '') {
                  item.TAG = 'TAG_14'
                  item.Content = this.form.subCenterHistory
                }
                break
              case 'TAG_16':
                if (this.form.checkSum !== '' && this.form.fileName !== '' && this.form.lengthAfter !== '' && this.form.lengthBefore !== '') {
                  item.TAG = 'TAG_16'
                  item.Content = `fileName:${this.form.fileName},lengthBefore:${this.form.lengthBefore},lengthAfter:${this.form.lengthAfter},checksum:${this.form.checkSum}`
                }
                break
              case 'TAG_17':
                if (this.form.concalUpdate !== undefined) {
                  item.TAG = 'TAG_17'
                  item.Content = 1
                }
                break
              case 'TAG_18':
                if (this.form.valve !== ''){
                  item.TAG = 'TAG_18'
                  item.Content = this.form.valve
                }
                break
            }
            if (item.TAG !== undefined) {
              reqPresetCommandDatas.push(item)
            }
          })
          if (this.form.beginTime !== '' && this.form.endTime !== '') {
            if (this.form.beginTime.substring(0,6) !== this.form.endTime.substring(0,6)){
              this.$message.warning('请选择同一天的数据进行补抄')
              return
            }
            if ((parseInt(this.form.endTime.substring(6)) - parseInt(this.form.beginTime.substring(6))) > 5){
              this.$message.warning('最多只能补抄不超过6小时的数据')
              return
            }
            const item = {}
            item.TAG = 'TAG_15'
            item.Content = this.form.beginTime + this.form.endTime
            reqPresetCommandDatas.push(item)
          }
          console.log(reqPresetCommandDatas)
          this.confirmLoading = true
          const commandType = this.writeCommandType === '1' ? 1 : 2
          // SendPresetWriteCommand(this.multiParameter.terminalId,reqPresetCommandDatas,commandType).then(res => {
          //   if (res.data.ResultCode === 200){
          //     this.$message.success('命令发送成功')
          //     this.confirmLoading = false
          //     this.checkGroup1 = []
          //     this.checkGroup2 = []
          //     this.checkGroup3 = []
          //     this.checkGroup5 = []
          //     this.form.beginTime = ''
          //     this.form.endTime = ''
          //     this.multiParameter.status = false
          //     this.$refs.form1.resetFields()
          //     this.$refs.form2.resetFields()
          //     this.$refs.form3.resetFields()
          //     this.$refs.form4.resetFields()
          //     this.$refs.form5.resetFields()
          //   }else {
          //     this.$message.error('命令发送失败')
          //   }
          // })
        }
      }else {
        this.$message.warning('请选择要设置的参数并填写相应配置')
      }
      this.confirmLoading = false
    },
    // 多参数命令读取取消操作
    paramsReadCancel() {
      this.openRead = false
    },
    // 多参数命令设置取消操作
    paramsSetCancel() {
      this.form.beginTime = ''
      this.form.endTime = ''
      this.checkGroup1 = []
      this.checkGroup2 = []
      this.checkGroup3 = []
      this.checkGroup5 = []
      this.$refs.form1.resetFields()
      this.$refs.form2.resetFields()
      this.$refs.form3.resetFields()
      this.$refs.form4.resetFields()
      this.$refs.form5.resetFields()
      this.openSet = false
    },

    /** 排序触发事件 */
    handleSorterChange({column, prop, order}) {
      this.queryParams.orderByColumn = prop
      this.queryParams.isAsc = order
      this.getList()
    },
    /** 检查设置排序字段 */
    checkSortColumn() {
      if (!this.queryParams.orderByColumn) {
        this.queryParams.orderByColumn = this.defaultSort.prop
        this.queryParams.isAsc = this.defaultSort.order
      }
    },
    // 展开折叠按钮
    shiftCollapseAble() {
      this.fold = !this.fold
      this.minShowControl()
    },
    // 通过maxShow控制元素显示/折叠
    minShowControl() {
      const group = window.document.querySelectorAll(`#searchFilter .el-form-item.el-form-item--${this.formItemSize}`)
      const len = group?.length ? group?.length - 1 : 0
      if (this.maxShow < len) {
        group.forEach((item, index) => {
          if (index > this.maxShow - 1 && index < len) {
            item.hidden = !this.fold
          }
        })
        this.collapseAble = true
      } else {
        this.collapseAble = false
      }
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.sheetsName.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.handleQuery();
    },
    /** 查询区域树 */
    getTreeList() {
      this.treeLoading = true;
      // listMeterSheetsTree({}).then(response => {
      //   this.sheetsTreeList = response;
      //   this.treeLoading = false;
      // });
      this.sheetsTreeList = JSON.parse(localStorage.getItem('meteredTreeData'))
      if(this.sheetsTreeList.length === 0) {
        this.treeLoading = false;
      }else {
        this.defaultExpandedKeys = [this.sheetsTreeList[0].sheetsCode];
        this.treeLoading = false;
      }
    },
    /** 查询告警列表 */
    getList() {
      this.checkSortColumn()
      this.loading = true;
      let choiceCheck = this.$refs.tree.getCurrentNode();
      if (choiceCheck !== null) {
        this.queryParams.sheetsCode = choiceCheck.sheetsCode
      }else{
        this.queryParams.sheetsCode = null
      }
      this.queryParams.systemFlag = this.systemFlag
      this.queryParams.loginUserId = this.loginUserId
      listTerminalsDb(this.queryParams).then(response => {
        this.terminalsdbList = response.rows;
        this.total = response.total
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      // this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.$refs.tree.setCurrentKey(null)
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
    },
  }
};
</script>
<style lang="scss" scoped>

.form_col {
  width: 80%;

  ::v-deep .el-form {
    width: 100%;
  }

  ::v-deep .el-form-item {
    width: 25%;
  }
}

.form_query {
  width: 20%;
  text-align: right;
}
// 设置本身箭头为隐藏状态
::v-deep .el-tree-node__expand-icon {
  width: 20px;
  padding: 0;
  margin: 5px 0;

  svg {
    display: none;
    width: 0;
  }
}

// 虚线所需样式
::v-deep .treeCont {
  .el-tree-node{
    width: fit-content;
  }
  .el-tree > .el-tree-node:before {
    //border-top: none;
    padding-left: 0px;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node__content {
    padding-left: 5px !important;
  }

  .el-tree-node__children {
    //overflow: visible !important;
    .el-tree-node {
      position: relative;
      padding-left: 5px;
    }
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    width: 4px;
  }

  .el-tree-node__children {
    padding-left: 18px;
  }

  .el-tree-node :last-child:before {
    height: 17px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
    top: 25px;
    width: 0px;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #c0c4cc;
    height: 100%;
    top: -3px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #c0c4cc;
    height: 0px;
    top: 13px;
    width: 16px;
  }
}

// 默认三角行换成加减号
::v-deep .treeCont {
  .el-tree-node__content > .el-tree-node__expand-icon {
    width: 16px;
    //width: 0px;
    padding: 0px;
    font-size: 16px !important;
    margin-right: 5px; //新增
  }

  .el-tree .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  //有子节点 且未展开
  .el-tree .el-tree-node__expand-icon:before {
    background: url('../../../assets/images/jia.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  .custom-tree-node .el-icon svg {
    display: block !important;
    color: #000;
  }

  //有子节点 且已展开
  .el-tree .el-tree-node__expand-icon.expanded:before {
    background: url('../../../assets/images/jian.png') no-repeat;
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 100% 100%;
  }

  //没有子节点
  .el-tree .el-tree-node__expand-icon.is-leaf::before {
    background: none;
    content: "";
    display: block;
    width: 20px;
    height: 20px ;
    font-size: 20px;
    background-size: 100% 100%;
  }
}
</style>
